<template>
<div>
  <el-card style="width: 600px;height: 700px;margin: 0 auto;
  background-color: rgba(255,255,255,0.3)">
    <!--label-width设置左侧文本的宽度-->
    <el-form :model="ruleForm"  ref="ruleForm" label-width="130px" class="demo-ruleForm">
      <el-form-item label="公告标题" prop="title">
        <el-input type="text" v-model="ruleForm.title"></el-input>
      </el-form-item>
      <el-form-item label="详情" prop="message">
        <el-input type="text" v-model="ruleForm.message"></el-input>
      </el-form-item>
      <el-form-item label="公告图片" >
        <!--limit限制图片上传的数量-->
        <el-upload
            action="http://localhost:9999/upload"
            name="picFile"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-success="handleSuccess"
            :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</div>
</template>

<script>
export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      ruleForm:{
        title: '',
        message:'',
        path: '',
      },
    }
  },
  methods:{
    handleRemove(file, fileList) {
      console.log(file, fileList);
      let pat=file.response;
      let url='http://localhost:9999/remove';
      this.axios.post(url,pat).then((response)=>{
        console.log('服务器端响应的结果：' + response);
        console.log(response);
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          console.log('删除相片成功');
          this.$message({
            message: '删除照片成功！',
            type: 'success'
          });
          this.ruleForm.path="";
        } else {
          console.log(responseBody.message);
          this.$message.error(responseBody.message);
        }
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.path;
      this.dialogVisible = true;
    },
    handleSuccess(response,file,fileList){
      //把服务器响应的图片路径 给到Vue的变量
      this.ruleForm.path=response;
    },
    submitForm(formName) {
      if (this.ruleForm.path==""){
        alert("请选择上传照片");
        return;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:9999/ann/add';
          console.log('尝试添加公告……');
          console.log('请求路径为：' + url);
          console.log('请求参数为：' + this.ruleForm);
          console.log(this.ruleForm);
          let formData=this.qs.stringify(this.ruleForm)
          this.axios.post(url, formData).then((response) => {
            console.log('服务器端响应的结果：' + response);
            console.log(response);
            let responseBody = response.data;
            if (responseBody.state == 20000) {
              console.log('添加公告成功');
              this.$message({
                message: '添加公告成功！',
                type: 'success'
              });
              this.resetForm(formName);
            } else {
              console.log(responseBody.message);
              this.$message.error(responseBody.message);
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },

}

</script>

<style>

</style>